<template>
    <div class="add-yh-dialog">
        <!-- 添加用户 -->
        <appdialog ref="dialog"
                   :visible="false"
                   title="用户配置"
                   width="40%"
                   @confirm="confirmAdd"
                   @cancle="cancleAdd">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="用户名：" prop="loginName">
                    <el-input v-model="ruleForm.loginName" :disabled="isdisable"></el-input>
                </el-form-item>
                <el-form-item label="密码："  prop="password" v-show="isShow">
                    <el-input v-model="ruleForm.password" type="password" v-if="pasdhidden">
                        <i slot="suffix" class="el-input__icon iconfont icon-kejian" @click="pasdhidden = !pasdhidden"></i>
                    </el-input>
                    <el-input v-model="ruleForm.password" type="text" v-if="!pasdhidden">
                        <i slot="suffix" class="el-input__icon iconfont icon-bukejian"  @click="pasdhidden = !pasdhidden"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="用户电话："  prop="mobile">
                    <el-input v-model="ruleForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="用户状态："  prop="status">
                    <el-select v-model="ruleForm.status">
                        <el-option :value=1 label="启用"></el-option>
                        <el-option :value=2 label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户角色："  prop="roleId" >
                    <el-checkbox-group v-model="ruleForm.roleIds" >
                        <!-- <el-tooltip class="item" effect="dark" v-for="item in jsList" :key="item.index" :content="item.roleName" placement="top"> -->
                           <el-checkbox :label="item.id"  v-for="item in jsList" :key="item.index" style="width:70px;margin-left:15px;width:80px;">
                               {{item.roleName}}
                            </el-checkbox>
                        <!-- </el-tooltip> -->
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="当前部门："  prop="" v-if="!copydeptId">
                    <h4>{{dangqianDept}}</h4>
                </el-form-item>
                <el-form-item label="更改部门："  prop="" v-if="!copydeptId">
                    <h4>{{nowDept}}</h4>
                </el-form-item>
                <tree  v-if="!copydeptId" style="margin-left:100px;width:300px;" @handleGetUserByDep="handleGetUserByDep"></tree>
            </el-form>
     </appdialog>
    
    </div>
</template>
<script>
import appdialog from "@/view/components/dialog/dialog";
import { saveUser,updateUser } from "@/service/swagger/UserController";
import { getTree, getDeptInfoByUserID } from "@/service/swagger/DeptController"
import { listRole } from "@/service/swagger/RoleController"
import {validatePhone} from "@/utils/validate";
import tree from './tree'


const validatePhoneRule = (rule, value, callback) => {
  if (validatePhone(value)) {
    callback();
  } else {
  	callback(new Error('请输入正确的手机号码'));
  }
};

export default {
    name: "addYHDialog",
    components: {
        appdialog,
        tree
    },
    data() {
        return {
            dangqianDept:'',
            isdisable:false,
            nowDept:'',
            id:'',
            pasdhidden:true,
            isShow:false,
            jsList:[],
            ruleForm:{
                name:'',
                loginName:'',
                password:'',
                mobile:'',
                status:1,
                roleIds:[],
                deptId:'',
                system:'0',
            },
            rules:{
                name:[
                    { required: true, message: '请输入名字', trigger: 'blur' }
                ],
                loginName:[
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                // password:[
                //     { required: true, message: '请选输入密码', trigger: 'blur' }
                // ],
                mobile:[
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    { validator: validatePhoneRule, trigger: 'blur' }
                ],
                status:[
                    { required: true, message: '请选择状态', trigger: 'change' }
                ]
            },
            copydeptId:'',
            copyobj:{},
        }
    },
    mounted() {

    },
    methods: {
        open(deptId,obj) {
            this.copydeptId = deptId,
            this.copyobj = obj
            if(deptId){
                //新增
               this.isdisable = false
               this.isShow = true
               this.rules.password = [
                  { required: true, message: '请输入密码', trigger: 'blur' } 
               ]
               this.id = deptId
               this.ruleForm.deptId = deptId
            }else{
                //修改
               this.dangqianDept = obj.deptName
               this.isdisable = true //用户名不可修改
               this.isShow = false   //密码输入框不要
               this.rules.password = []
               this.id = ''
               this.ruleForm = obj 
               console.log(obj.roleIds,'角色')
            }
            this.getJSList()
            this.$refs.dialog.open();
        },
        //更改部门
        handleGetUserByDep(data){
            this.nowDept = data.text
            this.ruleForm.deptId = data.id
        },
        confirmAdd() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // 验证通过
                   if(this.id){
                      this.submitAdd()
                   }else{
                      this.updeteUser()
                   }
                } else {
                    setTimeout(()=>{
                        this.open(this.copydeptId,this.copyobj);
                    },50)
                return false;
                }
            })
        },
        //获取所有得角色
        getJSList(){
            listRole({pageNum:1,pageSize:100}).then(ret=>{
                console.log(ret)
                if(ret&&ret.code == 0){
                    this.jsList = ret.data.data
                }
            })  
        },
        //新增用户
        submitAdd(){
            saveUser(this.ruleForm).then(ret=>{
                if(ret&&ret.code == 0){
                   this.$emit('handelSuccess')
                   this.$message({type: 'success',message: '添加成功!'})
                   this.cancleAdd()
                }else{
                    this.$emit('handelSuccess')
                    this.$message({type: 'error',message: '添加失败!'})
                    this.cancleAdd()
                }
            })
        },
        //更新用户
        updeteUser(){
            updateUser(this.ruleForm).then(ret=>{
                if(ret&&ret.code == 0){
                   this.$emit('handelSuccess')
                   this.$message({type: 'success',message: '更新成功!'})
                   this.cancleAdd()
                }else{
                    this.$emit('handelSuccess')
                    this.$message({type: 'error',message: '更新失败!'})
                    this.cancleAdd()
                }
            })
        },
        cancleAdd() {
            this.$refs['ruleForm'].clearValidate(['name','loginName','password','mobile','status']);
            this.deptId = '',
            this.nowDept = '',
            this.copydeptId = '',
            this.copyobj = {},
            this.ruleForm = {
                name:'',
                loginName:'',
                password:'',
                mobile:'',
                status:1,
                roleIds:[],
                deptId:'',
                system:0,
            }
        }
    }
}

</script>
<style scoped lang="scss">
@import "../../../../styles/variables.scss";
</style>
